<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">List Component</div>

                    <div class="card-body">

                        <p v-text="dropdownResult"></p>

                        <Dropdown @update:option="optionUpdate"></Dropdown>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Dropdown from './DropdownComponent';

    export default {
        mounted() {
            console.log('ListComponent mounted.')
        },

        components: {
            Dropdown
        },

        data: () => ({
        dropdownResult: '',
        }),

        methods: {
            optionUpdate(value) {
                this.dropdownResult = value
            }
        },
        
        computed: {
            tax() {
                return this.price * this.taxScale;
            },
        }

    }
</script>
